<script setup lang="ts">
import {ref} from "vue"
import MyTag from "~/components/constant/myTag.vue";
import MyButton from "~/components/constant/myButton.vue";

const emits = defineEmits([""]);

const props = defineProps({
  server: {
    type: Array,
    default: []
  },
})

onMounted(() => {
  initServerMsg()
})
const shop = ref(props.server[0]);

const addressTypeList = ref([]);
const thisAddressType = ref();

function initServerMsg() {
  let hasType = shop.value && shop.value.addressList && shop.value.addressList.length > 0;
  if (hasType) {
    for (let i = 0; i < shop.value.addressList.length; i++) {
      addressTypeList.value.push(shop.value.addressList[i].mapType)
    }
  }
  addressTypeList.value = [...new Set(addressTypeList.value)];
  thisAddressType.value = hasType ? addressTypeList.value[0] : '';
}

function changeServer(serverItem) {
  shop.value = serverItem;
  initServerMsg()
}

function changeMapType(type) {
  thisAddressType.value = type;
}
</script>

<template>
  <div class="server-msg-info-box">
    <div class="server-msg-info-header">
      服务器列表 -- 点击直连（请保证游戏处于关闭状态）
    </div>
    <div class="server-tab">
      <template v-for="(serverItem, index) in server" :key="index">
        <div :class="serverItem.id == shop.id?'server-tab-item server-tab-item-active':'server-tab-item'"
             @click="changeServer(serverItem)">
          {{ serverItem.name }}
        </div>
      </template>
    </div>
    <div class="tab-content">
      <div class="shop-item-box">
        <div class="header-box">
           <pre class="header-box-text">
             {{ shop.description }}
           </pre>
        </div>
        <div class="type-tab">
          <div class="type-tab-item" v-for="(addressType, index) in addressTypeList" :key="index">
            <my-button :data="addressType" @click="changeMapType(addressType)" :active="thisAddressType==addressType" :round="true"
                       :mapping='[{type: "success", data: "0", msg: "PVE",},{type: "warning", data: "1", msg: "PVP"}]'/>
          </div>
        </div>
        <div class="content-box">
          <template v-for="(address, index) in shop.addressList" :key="index">
            <div class="address-server-box" v-show="thisAddressType == address.mapType">
              <div class="server-top-box">
                <div class="server-name">
                  <el-tooltip :content="address.description" :show-after="300" placement="top" effect="light">
                    {{ address.name }}
                  </el-tooltip>
                </div>
                <div class="server-type">
                  <my-tag :data="address.mapType"
                          :mapping='[{type: "success", data: "0", msg: "PVE",},{type: "warning", data: "1", msg: "PVP"}]'/>
                </div>
                <div class="server-on-line">
                  <div v-if="address.onLine">
                    <el-tooltip content="服务器在线" :show-after="300" placement="top" effect="light">
                      <span class="on-line-state icon iconfont icon-zaixian-lixian" style="color: #40de9d;"></span>
                    </el-tooltip>
                  </div>
                  <div v-else>
                    <el-tooltip content="服务器离线" :show-after="300" placement="top" effect="light">
                      <span class="on-line-state icon iconfont icon-lixian" style="color: #d23d69;"></span>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="server-image-box">
                <template v-if="address.onLine">
                  <el-tooltip :content="'点击链接服务器 -- '+address.name" :show-after="300" placement="top"
                              effect="light">
                    <el-link :href="address.openLink" target="_blank" :underline="false">
                      <div class="on-line">
                        <el-image :src="address.image" fit="contain"/>
                      </div>
                    </el-link>
                  </el-tooltip>
                </template>
                <template v-else>
                  <div class="un-line">
                    <el-image :src="address.image" fit="contain"/>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.server-msg-info-box {
  background-color: white;
  padding: 0 .5rem;
  margin: 1rem 0;
  border-radius: .2rem;

  .server-msg-info-header {
    //font-weight: bolder;
    font-size: 1.2rem;
    margin: 0 1rem;
    padding: 1rem 0;
    border-bottom: .1rem solid #e0d7d7;
  }

  .server-tab {
    display: flex;
    justify-content: space-between;
    margin: 0 1rem;
    padding: 1rem .5rem;
    border-bottom: .1rem dashed #e0d7d7;

    .server-tab-item {
      font-weight: bolder;
      font-size: 1.1rem;
      cursor: pointer;
      user-select: none;
    }

    .server-tab-item:hover {
      color: #2e86ef;
    }

    .server-tab-item-active {
      color: #2e86ef;
    }
  }

  .tab-content {
    .shop-item-box {

      .header-box {
        display: flex;
        justify-content: space-between;
        padding: .5rem 0rem;
        margin: 0rem 1rem;
        border-bottom: .1rem dashed #e0d7d7;

        .header-box-text {
          text-wrap: wrap;
          white-space: pre-line;
        }
      }

      .type-tab {
        display: flex;
        justify-content: space-around;
        padding: .5rem 0rem;
        margin: 0rem 1rem;
        border-bottom: .1rem dashed #e0d7d7;

        .type-tab-item {
          cursor: pointer;
        }
      }

      .content-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .address-server-box {
          //width: 12.5rem;
          //height: 10rem;
          padding: .5rem;
          margin: 1rem .3rem;
          background-color: #EFF6FF;
          border-radius: .2rem;
          box-shadow: .4rem .4rem .8rem rgba(0, 0, 0, 0.5); //阴影效果 阴影水平偏移量（负值表示向左移动）。  阴影垂直偏移量（负值表示向上移动）。 模糊半径（越大越模糊）。 扩展半径（正值使阴影扩展，负值使阴影收缩）。阴影颜色，可以使用任何有效的 CSS 颜色值。
          transition: all 1s ease; /* 定义过渡属性 */


          .server-top-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .4rem 0;
            margin: .4rem 0;
            border-bottom: 1px dashed #e0d7d7;

            .server-name {
              cursor: pointer;
            }

            .server-on-line {
              cursor: pointer;

              .on-line-state {
                font-weight: bolder;
                font-size: 1.3rem;
              }
            }
          }

          .server-image-box {
            .on-line,
            .un-line {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 27rem;
              min-height: 12.5rem;
            }
          }
        }

        .address-server-box:hover {
          box-shadow: .5rem .5rem 1rem rgba(0, 0, 0, 0.5); //阴影效果 阴影水平偏移量（负值表示向左移动）。  阴影垂直偏移量（负值表示向上移动）。 模糊半径（越大越模糊）。 扩展半径（正值使阴影扩展，负值使阴影收缩）。阴影颜色，可以使用任何有效的 CSS 颜色值。

        }
      }
    }
  }

}
</style>